<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>拳皇97 · 双人对战（大蛇 vs 草薙京）</title>
  <link rel="stylesheet" href="kof97.css" />
</head>
<body>
  <canvas id="game"></canvas>
  <div class="ui-top" style="position:absolute;left:0;top:0;width:100%;padding:8px 12px;display:flex;align-items:center;gap:12px;">
    <div class="title" style="font-weight:700;">拳皇97 · BO3</div>
    <div class="help" style="flex:1;">P1: WASD 移动 · J/U/K/I 按键 · H 切换皮肤 | P2: 方向键移动 · 1/2/3/4 按键 · 9 切换皮肤 · 空格 暂停 · R 重开 · V 切换语音 · 支持原版皮肤：将雪碧图放入 assets/kof97/ 或使用右侧按钮导入</div>
    <button id="btn-import" style="padding:6px 10px;border:1px solid #666;background:#1f2430;color:#e6edf3;border-radius:6px;cursor:pointer;">原版皮肤导入</button>
  </div>

  <!-- 原版皮肤导入面板 -->
  <div id="import-modal" style="display:none;position:absolute;right:16px;top:54px;width:440px;background:#12161f;color:#e6edf3;border:1px solid #3a4152;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.35);">
    <div style="padding:12px 14px;border-bottom:1px solid #2a2f3c;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-weight:700;">导入原版皮肤（草薙京/大蛇）</div>
      <button id="btn-import-close" style="padding:4px 8px;border:1px solid #666;background:#1f2430;color:#e6edf3;border-radius:6px;cursor:pointer;">关闭</button>
    </div>
    <div style="padding:12px 14px;font-size:13px;line-height:1.6;display:grid;grid-template-columns:1fr;gap:10px;">
      <div>方式一：粘贴图片链接（PNG/GIF） · 方式二：选择本地PNG文件 · 应用后会缓存到浏览器（localStorage）。</div>
      <div style="display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center;">
        <div>草薙京 idle</div>
        <input id="kyoIdleUrl" placeholder="粘贴图片URL" style="width:100%;padding:6px;border-radius:6px;border:1px solid #3a4152;background:#0e1320;color:#e6edf3;" />
        <div>草薙京 sheet</div>
        <input id="kyoSheetUrl" placeholder="粘贴雪碧图URL（可选）" style="width:100%;padding:6px;border-radius:6px;border:1px solid #3a4152;background:#0e1320;color:#e6edf3;" />
        <div>大蛇 idle</div>
        <input id="oroIdleUrl" placeholder="粘贴图片URL" style="width:100%;padding:6px;border-radius:6px;border:1px solid #3a4152;background:#0e1320;color:#e6edf3;" />
        <div>大蛇 sheet</div>
        <input id="oroSheetUrl" placeholder="粘贴雪碧图URL（可选）" style="width:100%;padding:6px;border-radius:6px;border:1px solid #3a4152;background:#0e1320;color:#e6edf3;" />
      </div>
      <div style="display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center;">
        <div>或选择文件</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
          <input id="kyoIdleFile" type="file" accept="image/*" />
          <input id="kyoSheetFile" type="file" accept="image/*" />
          <input id="oroIdleFile" type="file" accept="image/*" />
          <input id="oroSheetFile" type="file" accept="image/*" />
        </div>
      </div>
      <div style="display:flex;justify-content:flex-end;gap:8px;">
        <button id="btn-import-clear" style="padding:6px 10px;border:1px solid #666;background:#3b2f2f;color:#e6edf3;border-radius:6px;cursor:pointer;">清空皮肤缓存</button>
        <button id="btn-import-preset-try" style="padding:6px 10px;border:1px solid #666;background:#33405a;color:#e6edf3;border-radius:6px;cursor:pointer;">预设链接一键尝试</button>
        <button id="btn-import-apply" style="padding:6px 10px;border:1px solid #666;background:#2a3140;color:#e6edf3;border-radius:6px;cursor:pointer;">一键应用</button>
      </div>
      <div style="opacity:0.8;">说明：优先使用导入的图片；若未导入则使用 assets/kof97/ 下的 PNG；都缺失时回退到方块模型。部分站点可能不支持CORS，若失败请下载后用“选择文件”导入。</div>
    </div>
  </div>

  <script src="kof97.js"></script>
</body>
</html>